<template>
  <p-card :bordered="false" class="peopleInfo">
    <p-table
      :columns="columns"
      :data-source="data"
      :pagination="false"
      bordered
    >
      <!-- <template
        v-for="col in ['description', 'num', 'startTime', 'endTime']"
        :slot="col"
        slot-scope="text, record, index"
      >


        <div :key="col">
          <p-input
            v-if="record.editable"
            style="margin: -5px 0"
            :value="text"
            @change="e => handleChange(e.target.value, record.key, col)"
          />
          <template v-else>
            {{ text }}
          </template>
        </div>


      </template> -->

      <template slot="description" slot-scope="text, record, index">
        <p-input
          v-if="record.editable"
          style="margin: -5px 0"
          :value="text"
          @change="
            (e) => handleChange(e.target.value, record.key, 'description')
          "
        />
        <template v-else>
          {{ text }}
        </template>
      </template>

      <template slot="num" slot-scope="text, record, index">
        <p-input
          v-if="record.editable"
          style="margin: -5px 0"
          :value="text"
          @change="(e) => handleChange(e.target.value, record.key, 'num')"
        />
        <template v-else>
          {{ text }}
        </template>
      </template>

      <template slot="startTime" slot-scope="text, record, index">
        <p-date-picker
          v-model="curStartTime"
          v-if="record.editable"
          @change="startTimeChange"
        />

        <template v-else>
          {{ text }}
        </template>
      </template>

      <template slot="endTime" slot-scope="text, record, index">
          <!-- :value="text" -->
        <p-date-picker
          v-model="curEndTime"
          v-if="record.editable"
          @change="endTimeChange"
        />

        <template v-else>
          {{ text }}
        </template>
      </template>

      <template slot="action" slot-scope="text, record, index">
        <div class="editable-row-operations">
          <span v-if="record.editable">
            <a @click="() => save(record.key)">Save</a>
            <p-popconfirm
              title="Sure to cancel?"
              @confirm="() => cancel(record.key)"
            >
              <a>Cancel</a>
            </p-popconfirm>
          </span>
          <span v-else>
            <a :disabled="editingKey !== ''" @click="() => edit(record.key)"
              >编辑</a
            >
            <a @click="() => del(record.key)"> 删除 </a>
          </span>
          <span> </span>
        </div>
      </template>
    </p-table>

    <p-button type="primary" @click="add">新增</p-button>
  </p-card>
</template>
<script>
const columns = [
  {
    title: "序号",
    dataIndex: "",
    key: "rowIndex",
    width: 60,
    align: "center",
    customRender: (t, r, index) => {
      return parseInt(index) + 1;
    },
  },
  {
    title: "技能要求描述",
    dataIndex: "description",
    scopedSlots: { customRender: "description" },
  },
  {
    title: "需求人数",
    dataIndex: "num",
    scopedSlots: { customRender: "num" },
  },
  {
    title: "借调开始时间",
    dataIndex: "startTime",
    width: "200px",

    scopedSlots: { customRender: "startTime" },
  },
  {
    title: "借调结束时间",
    dataIndex: "endTime",
    width: "200px",
    scopedSlots: { customRender: "endTime" },
  },
  {
    title: "操作",
    dataIndex: "action",
    width: "200px",
    scopedSlots: { customRender: "action" },
  },
];

const data = [];
for (let i = 0; i < 10; i++) {
  data.push({
    key: i.toString(),
    description: `Edrward ${i}`,
    num: 32,
    startTime: `London Park no. ${i}`,
    endTime: `London Park no. ${i}`,
  });
}
export default {
  data() {
    this.cacheData = data.map((item) => ({ ...item }));
    return {
      data,
      columns,
      editingKey: "",
      curStartTime: "",
      curEndTime: "",
    };
  },
  methods: {
    handleChange(value, key, column) {
      console.log(value);
      console.log(key);
      console.log(column);

      const newData = [...this.data];
      const target = newData.filter((item) => key === item.key)[0];
      if (target) {
        target[column] = value;
        this.data = newData;
      }
    },

    startTimeChange(date, dateString){
      this.curStartTime = dateString
      this.timeChange(date, dateString, 'startTime')
    },

    endTimeChange(date, dateString) {
      this.curEndTime = dateString

      this.timeChange(date, dateString, 'endTime')
    },

    timeChange(date, dateString, column) {

      console.log(date);
      console.log(dateString);
      console.log(column);
      
      console.log(this.getCurIndex());
      

      // const newData = [...this.data];
      // const target = newData.filter((item) => key === item.key)[0];
      // if (target) {
      //   target[column] = value;
      //   this.data = newData;
      // }

    },
    edit(key) {
      const newData = [...this.data];
      const target = newData.filter((item) => key === item.key)[0];
      this.editingKey = key;
      if (target) {
        target.editable = true;
        this.data = newData;
      }

      this.curStartTime = this.data[this.getCurIndex()].startTime
       this.curEndTime = this.data[this.getCurIndex()].endTime

    },
    save(key) {

      // const newData = [...this.data];
      // this.data[this.getCurIndex].editable = false

      const newData = [...this.data];
      const newCacheData = [...this.cacheData];
      const target = newData.filter((item) => key === item.key)[0];
      const targetCache = newCacheData.filter((item) => key === item.key)[0];
      if (target && targetCache) {
        delete target.editable;
        this.data = newData;
        Object.assign(targetCache, target);
        this.cacheData = newCacheData;
      }

      this.data[this.getCurIndex()].startTime = this.curStartTime
      this.data[this.getCurIndex()].endTime = this.curEndTime


      this.editingKey = "";



    },
    cancel(key) {
      const newData = [...this.data];
      const target = newData.filter((item) => key === item.key)[0];
      this.editingKey = "";
      if (target) {
        Object.assign(
          target,
          this.cacheData.filter((item) => key === item.key)[0]
        );
        delete target.editable;
        this.data = newData;
      }
    },
    add() {
      this.data.push({
        key: Math.floor(100000 * Math.random()),
        description: "新",
        num: Math.floor(Math.random() * 10),
        startTime: "新",
        endTime: "新",
      });
    },
    del(key) {
      let delIndex = 0;
      this.data.forEach((ele, index) => {
        if (ele.key == key) {
          delIndex = index;
        }
      });
      this.data.splice(delIndex, 1);
    },
    getCurIndex(){
      let curIndex;
      this.data.forEach( (ele, index) => {
        if( this.editingKey == ele.key ){
          curIndex = index
        }
      } )
      return curIndex
    }
  },
};
</script>
<style scoped>
.editable-row-operations a {
  margin-right: 8px;
}
</style>
 